<template>
  <view class="container">
    <!-- 非遗文化背景 -->
    <image 
      class="cultural-bg" 
      src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine_bg.png" 
      mode="aspectFill"
    ></image>

    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- 传统装饰元素 -->
      <image 
        class="horn-decoration top-left" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>
      <image 
        class="horn-decoration top-right" 
        src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/horn.png"
        mode="aspectFit"
      ></image>

      <view class="content">
        <text class="title">掼牛传承人登录</text>

        <!-- 表单区域 -->
        <view class="form-group">
          <!-- 手机号输入 -->
          <view class="form-item">
            <image class="input-icon" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/mine/phone.png"></image>
            <input
              class="cultural-input"
              type="number"
              v-model="mobile"
              placeholder="传承人联系方式"
              maxlength="11"
              @input="validateMobile"
            />
            <text class="error-msg">{{ mobileError }}</text>
          </view>

          <!-- 密码输入 -->
          <view class="form-item">
            <image class="input-icon" src="https://mp-1de2ab47-60cc-4717-bb0c-985e43d6d68e.cdn.bspapp.com/img/icon/密码.png"></image>
            <input
              class="cultural-input"
              password
              v-model="password"
              placeholder="请输入斗牛密语"
              @input="validatePassword"
            />
            <text class="error-msg">{{ passwordError }}</text>
          </view>
        </view>

        <!-- 登录按钮 -->
        <button 
          class="login-btn"
          :class="{ disabled: !canLogin }"
          @tap="handleLogin"
          :loading="loading"
        >
          <text class="btn-text">{{ loading ? '验证中...' : '进入斗牛场' }}</text>
        </button>

        <!-- 辅助链接 -->
        <view class="action-links">
          <text class="link-text" @tap="navigateToRegister">成为传承人</text>
        </view>

        <!-- 协议条款 -->
        <view class="agreement">
          <checkbox-group @change="toggleAgree">
            <checkbox :checked="agreed" color="#8B4513"/>
          </checkbox-group>
          <text class="agreement-text">
            已阅读并同意
            <text class="link" @tap="navToProtocol">《掼牛传承公约》</text>
          </text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      mobile: '',
      password: '',
      agreed: false,
      mobileError: '',
      passwordError: '',
      loading: false
    }
  },
  computed: {
    canLogin() {
      return (
        !this.mobileError &&
        !this.passwordError &&
        this.mobile.length === 11 &&
        this.password.length >= 6 &&
        this.agreed
      )
    }
  },
  methods: {
    async handleLogin() {
      // 执行验证
      this.validateMobile()
      this.validatePassword()
      
      if (!this.canLogin) {
        uni.showToast({
          title: '请完善斗牛传承信息',
          icon: 'none'
        })
        return
      }
      
      this.loading = true
      try {
        const res = await uniCloud.callFunction({
          name: 'login',
          data: {
            mobile: this.mobile,
            password: this.password
          }
        })
        
        if (res.result.code === 0) {
          // 存储用户信息到本地
          uni.setStorageSync('userInfo', res.result.data.userInfo)
          
          uni.showToast({
            title: '成功进入斗牛场',
            icon: 'success'
          })
          uni.switchTab({
            url: '/pages/mine/mine'
          })
        } else {
          const errorMap = {
            4001: '牛角号格式有误',
            4002: '该用户还未注册',
            4003: '该用户已被停用',
            4004: '密码错误',
            500: '服务器正在开小差'
          }
          uni.showToast({
            title: errorMap[res.result.code] || '进入失败',
            icon: 'none'
          })
        }
      } catch (error) {
        uni.showToast({
          title: '牛魂网络波动，请重试',
          icon: 'none'
        })
      } finally {
        this.loading = false
      }
    },
    navigateToRegister(){
      uni.navigateTo({
        url:'/pages/register/register'
      })
    },
    // 验证方法
    validateMobile() {
      const reg = /^1[3-9]\d{9}$/
      if (!this.mobile) {
        this.mobileError = '请输入牛角号'
      } else if (!reg.test(this.mobile)) {
        this.mobileError = '牛角号需11位数字'
      } else {
        this.mobileError = ''
      }
    },
    validatePassword() {
      if (!this.password) {
        this.passwordError = '请输入斗牛密语'
      } else if (this.password.length < 6) {
        this.passwordError = '密语至少6位'
      } else {
        this.passwordError = ''
      }
    },
    toggleAgree(e) {
      this.agreed = !!e.detail.value.length
    },
    // 其他方法保持不变
    // ...
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.cultural-bg {
  width: 100%;
  height: 100%;
  filter: brightness(0.8) sepia(0.3);
}

.login-card {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 86%;
  background: rgba(255, 248, 240, 0.95);
  border-radius: 32rpx;
  padding: 60rpx 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(139, 69, 19, 0.3);

  .horn-decoration {
    position: absolute;
    width: 120rpx;
    height: 180rpx;
    
    &.top-left {
      top: -80rpx;
      left: -40rpx;
    }
    
    &.top-right {
      top: -80rpx;
      right: -40rpx;
      transform: scaleX(-1);
    }
  }
}

.title {
  display: block;
  font-size: 44rpx;
  color: #8B4513;
  text-align: center;
  margin-bottom: 60rpx;
  font-weight: bold;
  letter-spacing: 4rpx;
  text-shadow: 2rpx 2rpx 4rpx rgba(255, 228, 196, 0.5);
}

.form-group {
  margin: 40rpx 0;
}

.form-item {
  margin-bottom: 60rpx;
  position: relative;

  .input-icon {
    position: absolute;
    left: 30rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 40rpx;
    height: 40rpx;
    z-index: 2;
  }
}

.cultural-input {
  height: 100rpx;
  padding: 0 30rpx 0 90rpx;
  background: #FFF;
  border: 2rpx solid #D2B48C;
  border-radius: 50rpx;
  font-size: 32rpx;
  color: #8B4513;
  transition: all 0.3s;

  &:focus {
    border-color: #8B4513;
    box-shadow: 0 4rpx 12rpx rgba(139, 69, 19, 0.1);
  }
}

.error-msg {
  position: absolute;
  bottom: -40rpx;
  left: 30rpx;
  font-size: 24rpx;
  color: #c0392b;
}

.login-btn {
  height: 100rpx;
  line-height: 100rpx;
  background: linear-gradient(45deg, #8B4513, #A0522D);
  color: #FFE4C4;
  font-size: 34rpx;
  border-radius: 50rpx;
  margin: 40rpx 0;
  position: relative;
  overflow: hidden;

  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 200%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: all 0.5s;
  }

  &:active::after {
    left: 100%;
  }

  &.disabled {
    background: #D2B48C;
    opacity: 0.8;
  }
}

.action-links {
  text-align: center;
  margin: 30rpx 0;

  .link-text {
    color: #A0522D;
    font-size: 28rpx;
    text-decoration: underline;
  }
}

.agreement {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 30rpx 0;

  .agreement-text {
    font-size: 24rpx;
    color: #8B4513;
    margin-left: 10rpx;
  }

  .link {
    color: #A0522D;
    text-decoration: underline;
  }
}
</style>